<template>
  <div class="workTicketChange flowCloumn h100">
    <div class="constentmain h100">
      <div class="tableContent">
        <list-table-new
          v-bind="tableSetting"
          ref="klTable"
        ></list-table-new>
      </div>
      <div class="annotations list-table-main">
        注：
        <span class="circle normal-bg"></span>
        巡视结果为正常
        <span class="circle warning-bg"></span>
        巡视结果存在异常
      </div>
    </div>
  </div>
</template>
<script>
import { getPatrolOrderList } from "@/api/orderManagement/patrolOrder.js";
export default {
  data() {
    return {
      tableSetting: {
        radioShow: true,
        selectionShow: false,
        showFilterBtn: false,
        showCustomBtn: false,
        searchObj: {
          searchMethod: (params, sortStr) => {
            this.getTableData(params, sortStr);
          },
          queryData: {
            page: 1,
            pageSize: 15,
          },
          searchArr: [
            {
              type: "input",
              label: "标题",
              model: "title",
              placeholder: "请输入",
            },
            {
              type: "select",
              label: "巡视类别",
              model: "patrolType",
              placeholder: "请选择",
              option: this.$store.getters.dirtData("patrol_way"),
            },
            {
              type: "organization",
              label: "所属单位",
              model: "belongDeptName",
              idsStr: "belongDeptId",
            },
            {
              type: "select",
              label: "工单状态",
              model: "status",
              placeholder: "请输入",
              option: this.$store.getters.dirtData("order_patrol_status"),
            },
            {
              type: "text",
              label: "工单编号",
              model: "code",
              placeholder: "请输入",
            },
            {
              type: "organization",
              label: "巡视单位",
              model: "patrolDeptName",
              idsStr: "patrolDeptId",
            },
            {
              type: "select",
              label: "签到状态",
              model: "arriveStatus",
              placeholder: "请输入",
              option: [
                { label: "已签到", value: 1 },
                { label: "未签到", value: 0 },
              ],
            },
          ],
        },
        //过滤器的值
        filterFormData: {},
        //过滤器的默认值
        defaultFilterData: {},
        userCustomData: [],
        actionList: [],
        column: [
          {
            label: "工单状态",
            prop: "status",
            sortable: "custom",
            scopeType: "formate",
            width: 110,
            method: (row) => {
              let str = this.$store.getters.fineDirtDataName(
                "order_patrol_status",
                row.status
              );
              if (row.unusual == 0) {
                return `<span class="normal">${str}</span>`;
              } else {
                return `<span class="warning">${str}</span>`;
              }
            },
          },
          {
            label: "是否超期",
            prop: "overtime",
            sortable: "custom",
            width: 110,
            formatter: (row) => {
              return row.overtime == 1 ? "是" : "否";
            },
          },
          {
            label: "工单编号",
            width: 200,
            prop: "code",
            sortable: "custom",
            showTooltip: true,
          },
          {
            label: "标题",
            width: 250,
            prop: "title",
            sortable: "custom",
            showTooltip: true,
          },
          {
            label: "巡视类别",
            prop: "patrolType",
            width: 110,
            sortable: "custom",
            formatter: (row) => {
              return this.$store.getters.fineDirtDataName(
                "patrol_way",
                row.patrolType
              );
            },
          },
          {
            label: "所属单位",
            width: 150,
            prop: "belongDeptName",
            sortable: "custom",
          },
          {
            label: "巡视单位",
            width: 150,
            prop: "patrolDeptName",
            sortable: "custom",
          },
          {
            label: "巡视人员",
            width: 150,
            prop: "patrolDeptName",
            sortable: "custom",
            showTooltip: true,
            formatter: (row) => {
              if (row.userPos) {
                return row.userPos.map((item) => item.workerName).join(",");
              } else {
                return "-";
              }
            },
          },
        //   {
        //     label: "计划开始时间",
        //     prop: "planStartTime",
        //     sortable: "custom",
        //     width: 150,
        //     showTooltip: true,
        //   },
        //   {
        //     label: "计划结束时间",
        //     prop: "planEndTime",
        //     sortable: "custom",
        //     width: 150,
        //     showTooltip: true,
        //   },
          {
            label: "创建时间",
            prop: "createTime",
            sortable: "custom",
            width: 150,
            showTooltip: true,
          },
        ],
        paginationObj: {
          pageSizes: [15, 30, 50, 100],
        },
        totalNumber: 0,
        //表格方法
        tableMethods: {
          //点击行的方法
          rowClick: (row) => {
            //this.goDetailPage(row, "patrolOrderDetails", "edit");
          },
        },
      },
      checkData: [],
    };
  },
  created() {
    /* 添加监听事件 */
    window.addEventListener("storage", this.updateData);
  },
  beforeDestroy() {
    /* 删除监听事件 */
    window.removeEventListener("storage", this.updateData);
  },
  mounted() {
    this.updateData();
  },
  methods: {
    updateData() {
      this.$refs.klTable.searchData();
    },
    // 获取表格数据
    getTableData(params, sortStr) {
      let queryData = Object.assign({}, params);
      if (sortStr.length > 0) {
        queryData.orders = sortStr;
      }
      getPatrolOrderList(queryData).then((res) => {
        this.$set(this.tableSetting, "tableData", res.data.list);
        this.$set(this.tableSetting, "totalNumber", res.data.total);
      });
    },
    //文件下载
    getSelectData(){
       let data = this.$refs.klTable.getRadioData();
       return data;
    }
  },
};
</script>
<style lang="less" scoped>
.workTicketChange {
  min-height: 500px;
  text-align: center;
  height: 100%;
  .constentmain {
    position: relative;
    //margin-left: 10px;
  }
  .tableContent {
    min-height: 500px;
    height: 100%;
  }
}
.flowCloumn {
  display: flex;
  flex-flow: column nowrap;
}
.annotations {
  text-align: left;
  height: 20px;
  line-height: 20px;
  position: absolute;
  bottom: 5px;
}
.circle {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 10px;
}
</style>
